<template>
  <div class="inp">
    <el-input
    v-model="inputSearch"
    v-bind="$attrs"
    @keydown.enter="search"
  >
    <template #append>
      <el-button :icon="Search" @click="search" />
    </template>
    <template #suffix>
      <el-icon
        style="cursor: pointer"
        v-if="inputSearch.length"
        @click="inputSearch = ''"
        ><CircleClose
      /></el-icon>
    </template>
  </el-input>
  </div>
</template>

<script setup lang="ts">
import { Search, CircleClose } from "@element-plus/icons-vue"
import { ref, useAttrs, watchEffect } from "vue"

// 自定义事件,点击搜索事件
const emits = defineEmits(["search", "update:inputSearch"])

// 声明inputSearch
defineProps<{
  inputSearch: string
}>()

// 搜索内容
const inputSearch = ref("")

// 搜索
function search() {
  if(inputSearch.value.length === 0) return
  emits("search")
}

// 监听子组件内的inputSearch,监听到传到外面
watchEffect(() => {
  emits("update:inputSearch", inputSearch.value)
})
</script>

<style scoped lang="scss">
.inp{
  margin-bottom: 15px;
}
</style>
